<template>
  <div class="tag-enums">
    <ul class="tag-scrollbar">
      <li v-for="(item, index) in dataList" :key="index" class="clearfix">
        <el-row :gutter="5">
          <el-col :span="10" align="center">{{ item.cdVal }}</el-col>
          <el-col :span="14" align="center">{{ item.cdDesc }}</el-col>
        </el-row>
      </li>
    </ul>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.currentPageNum"
      :page-size="params.pageSize"
      :pager-count="5"
      background
      :small="small"
      layout="total, prev, pager, next"
      :total="totalSize"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    tagId: {
      type: String,
      required: true,
      default: ''
    },
    onLineFlag: {
      type: Number,
      default: 1
    },
    small: {
      type: Boolean,
      default: true
    },
    isChange: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      dataList: [],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  created() {
    this.getList()
  },
  watch: {
    tagId() {
      this.getList()
    }
  },
  methods: {
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.currentPageNum = val
      this.getList()
    },
    getList() {
      if (!this.tagId || this.loading) return
      this.params.queryParams.tagId = this.tagId
      this.params.queryParams.onLineFlag = this.onLineFlag
      this.loading = true
      let url = this.isChange ? 'ast/astTagEnumVal/modifyPageList' : 'ast/astTagEnumVal/pageList'
      this.$ajax({
        url: this.$ajax.setUrl(url),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error('获取枚举值列表失败！')
        }
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss">
.tag-enums {
  .el-pagination {
    padding-right: 10px;
    text-align: right;
    .el-input {
      width: auto !important;
    }
    li {
      line-height: 22px !important;
      .el-col {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
